import React, { useState, useRef } from 'react';
import { Toast } from 'react-weui';
import axios from 'axios';
import styled from 'styled-components'


const Box = styled.div`
.box{
  box-sizing: border-box;
  padding-left: 10px;
  padding-right: 10px;
}

.input1{
  appearance: none;
  -webkit-appearance: none;
  box-sizing: border-box;
  border: 1px solid #de3232;
  border-radius: 5px;
  width: 100%;
  min-width: 1px;
  height: 38px;
  padding-left: 10px;
  outline: none;
  font-size: 18px;      
}
.input1::placeholder{
  color: #a5a5a5;
  font-size: 18px;
}

.login_btn{
  appearance: none;
  -webkit-appearance: none;
  border:0;
  width: 100%;
  min-width: 1px;
  height: 38px;
  border-radius: 5px;
  background-color: #de3232;
  color: #ffffff;
  font-size: 18px;
  outline: none;
  text-align: center;
}
.link_btn{
  color: #4d35a6;
  font-size: 14px;
  text-decoration: underline;
}

.avater_btn{
  display: inline-block;
  width: 45px;
  height: 45px;
  border: 1px solid #888888;
  border-radius: 4px;
  position: relative;
}

.avater_btn input{
  display: inline-block;
  width: 45px;
  height: 45px;
  opacity: 0;
  z-index: 9;
}

.img{
  display: inline-block;
  width: 45px;
  height: 45px;
  // position: absolute;
  // top: 0;
  // left:0;
  // z-index: 8;
}


.avater_btn::before{
  content: '';
  display: inline-block;
  width: 30px;
  height: 2px;
  background-color: #888888;
  position: absolute;
  top: 50%;
  margin-top: -1px;
  left: 50%;
  margin-left: -15px;
  z-index: 7;
}

.avater_btn::after{
  content: '';
  display: inline-block;
  width: 2px;
  height: 30px;
  background-color: #888888;
  position: absolute;
  top: 50%;
  margin-top: -15px;
  left: 50%;
  margin-left: -1px;
  z-index: 7;
}


.itemname{
  color: #a5a5a5;
  font-size: 18px;
  line-height: 22px;
}
`

const Reg = (props) => {
  const [img, setImg] = useState();

  const [show, setShow] = useState({ icon: 'loading', context: '加载中', flag: false });

  const unameRef = useRef();
  const pwRef = useRef();
  const pw1Ref = useRef();
  const imgRef = useRef();


  function showToast(show) {
    setShow(show)
    setTimeout(() => {
      setShow({ icon: 'loading', context: '加载中', flag: false })
    }, 3000)
  }


  function login() {
    console.log(unameRef)

    let uname = unameRef.current.value;
    let pw = pwRef.current.value;
    let pw1 = pw1Ref.current.value;

    if (uname) {
      if (pw && pw1 && pw === pw1) {

        if (img) {

          let data = new FormData();
          data.append('username', uname)
          data.append('password', pw)
          data.append('avatar', img)

          axios.post('http://www.young1024.com:82/sign', data).then(res => {
            console.log(res)
            if (res.data.status === "success") {
              showToast({ icon: 'success-no-circle', context: '注册成功!', flag: true })
              setTimeout(() => {
                props.history.replace('/login')
              }, 3500)

            } else {
              showToast({ icon: 'warn', context: '注册失败', flag: true })
            }


          })


        } else {
          showToast({ icon: 'warn', context: '请选择头像', flag: true })
        }

      } else {
        showToast({ icon: 'warn', context: '两次密码不一致', flag: true })
      }
    } else {
      showToast({ icon: 'warn', context: '用户名不能为空', flag: true })
    }






  }

  function sleimg(e) {
    // console.log(e.target.files[0])
    setImg(e.target.files[0])

    let reader = new FileReader();

    reader.readAsDataURL(e.target.files[0])

    reader.onload = function () {
      // console.log(this.result)

      imgRef.current.src = this.result;
    }
  }



  return (
    <Box>
      <div className="box">
        <div className="m_t25">
          <input type="text" ref={unameRef} className="input1" placeholder="用户名" />
        </div>

        <div className="m_t25">
          <input type="password" ref={pwRef} className="input1" placeholder="密码" />
        </div>

        <div className="m_t25">
          <input type="password" ref={pw1Ref} className="input1" placeholder="重复密码" />
        </div>

        <div className="m_t25">
          <div className="itemname">头像</div>

          <div>
            <a className="avater_btn">
              <input type="file" onChange={sleimg}></input>
            </a>
          </div>
          <img className="img" ref={imgRef} />
        </div>


        <div className="m_t25" >
          <input type="button" className="login_btn" onClick={login} value="注册" />
        </div>

        {/* <div className="m_t25" >
            <input type="button" className="login_btn" onClick={()=>{
              showToast({icon:'loading',context:'加载中..',flag:true})
            }} value="test" />
        </div> */}

        <div className="m_t15">
          <div className="tar">
            <a className="link_btn" onClick={() => {
              props.history.push('/login')
            }}>登录</a>
          </div>
        </div>

        <Toast icon={show.icon} show={show.flag}>{show.context}</Toast>
      </div>
      </Box>
  );
}

export default Reg;
